<template>
  <div class="Bar" id="Bar"></div>
</template>
<script setup>
import * as echarts from "echarts";
import visitsDataJson from "@/data/statistics/visits.json";
const visitsData = visitsDataJson.data.map(item=>(item.val3))
onMounted(() => {
  initChart();
});
function initChart() {
  const lineRef = echarts.init(document.getElementById("Bar"));
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      show: true,
      data: ["版本"],
    },
    xAxis: {
      type: "category",
      data:Array.from(new Set(visitsData)) ,
    },
    yAxis: {
      type: "value",
      name: "个",
      axisLine: {
        show: true,
      },
    },
    series: [
      {
        data: [150, 230, 224],
        type: "bar",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#EDE7FE' },
            { offset: 1, color: '#B3A2F4' }
          ])
        },
        barWidth:20
      },
    ],
  };
  lineRef.setOption(option);
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.Bar{
  width: 100%;
  height: 400px;
}
</style>
